<template>
  <div id="app" class="app-content">
    <!-- 头部筛选 -->
    <search @show="show" />
    <div class="stand"></div>
    <!-- 轮播图 -->
    <swiperpack :arr="arr" />

    <div class="chec">
      <div class="chec-tab">
        位置
        <icons iconName="icon-sanjiaoxing" />
      </div>
      <div class="chec-tab">
        方式
        <icons iconName="icon-sanjiaoxing" />
      </div>
      <div class="chec-tab">
        租金
        <icons iconName="icon-sanjiaoxing" />
      </div>
      <div class="chec-tab">
        筛选
        <icons iconName="icon-sanjiaoxing" />
      </div>
      <div class="chec-tab">
        排序
        <icons iconName="icon-sanjiaoxing" />
      </div>
    </div>

    <div class="roomList">
      <roomInfo v-for="(item, index) in arr" :key="index" :arr="item" />

      <div class="stand"></div>
    </div>

    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/info">info</router-link>
    </div> -->
    <!-- <router-view/> -->
  </div>
</template>


<script>
import search from "@/components/search/index";
import swiperpack from "@/components/swiperpack/index";
import roomInfo from "@/components/roomInfo/index";
import icons from "@/components/icon/index";
import tabbar from "@/components/tabbar/index";
import { dataArr } from "@/utils/index";

export default {
  name: "home",
  components: {
    search,
    swiperpack,
    roomInfo,
    icons,
    tabbar,
  },
  data() {
    return {
      val: "",
      arr: [],
    };
  },
  beforeCreate() {
    this.$nextTick(() => {
      document.body.setAttribute("style", "margin:0");
    });
  },
  //实例销毁之前钩子--移除body 标签的属性style
  beforeDestroy() {
    document.body.removeAttribute("style");
  },
  created() {
    this.show('');
  },
  methods: {
    show(e) {
      this.arr = []
      if (e != "") {
        let exp = eval("/" + e + "/g")
				dataArr().forEach((item,index) => {
          if (item.name.indexOf(e)>0) {
					this.arr.push(item)
          }
				})
      } else {
        this.arr = dataArr();
      }
    },
    /**
     * 名称筛选
     */
    keyupSearchInput(e) {
      // 搜索回车键
      if (e.keyCode == 13) {
        console.log(this.$refs.searchInput.value);
      }
    },
  },
};
</script>


<style lang="less">
.app-content {
  width: 100%;
  height: 100%;

  .chec {
    display: flex;
    padding: 3vw 0;
    .chec-tab {
      width: calc(100% / 5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4vw;
      .iconfont {
        padding-left: 1vw;
        color: #e1e1e1;
      }
    }
  }

  .list-tit {
    text-align: left;
    padding: 0 7vw;
    font-size: 4vw;
    font-weight: 700;
  }

  .roomList {
    padding: 0 2vw;
    .room-content {
    }
  }
}

.stand {
  width: 100%;
  height: 13vw;
}
</style>
